<template>
	<view >
		<view class="designerHeader">
			<image src="/static/svg/designerHeader.svg" mode="widthFix" class="background"></image>
			<view class="header">
				<image src="/static/svg/designerHeader.svg" mode="widthFix" class="header_background"></image>
				<view class="header_left" @tap="back">
					<image src="/static/svg/return.svg" mode=""></image>
				</view>
				<view class="header_middle">
					<text>个人主页</text>
				</view>
				<view></view>
			</view>
			<view style="height: 88rpx;"></view>
			<view class="designerHeader_body">
				<image :src="message.headPicture" class="head" mode="" v-if="message.academic"></image>
				<image src="/static/svg/v.svg" class="v" mode=""></image>
				<view class="detail" @tap="toDetail" v-if="message.academic">
					<text>详细资料</text>
					<image src="/static/svg/moer22.svg" mode=""></image>
				</view>
				<view class="name" v-if="message.academic">
					<text>{{message.username?message.username:message.nickname}}</text>
					<image src="/static/svg/man.svg" mode="" v-if="message.sex=='男'"></image>
					<image src="/static/svg/woman.svg" mode="" v-if="message.sex=='女'"></image>
				</view>
				<view class="desc" v-if="message.academic">
					<image src="/static/svg/sjs.svg" mode=""></image>
					<text>设计师</text>
				</view>
				<view class="speciality" v-if="message.academic">
					<text>{{message.academic}}</text>
					<view></view>
					<text>{{message.major}}</text>
					<view></view>
					<text v-if="message.experience||message.experience==0">{{message.experience==0?"行业新手":("行业经验"+message.experience+"年")}}</text>
				</view>
				<view class="phone" v-if="message.academic">
					<image src="/static/svg/dianhua.svg" mode="" @tap="toOpenPhone"></image>
					<text @tap="toOpenPhone">{{message.telephone}}</text>
				</view>
				<view class="phone addr" v-if="message.academic">
					<image src="/static/svg/gsmc.svg" mode=""></image>
					<text>{{message.companyName}}</text>
				</view>
			</view>
			<view class="guanzhu" v-if="message.academic">
				<view @tap="toLookHisFans" data-type='关注'>
					<text>关注</text>
					<text style="margin-left:0.5em;">{{message.focusNum}}</text>
				</view>
				<view class="xian"></view>
				<view @tap="toLookHisFans" data-type='粉丝'>
					<text>粉丝</text>
					<text style="margin-left:0.5em;">{{message.fansNum}}</text>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup_body">
				<view @tap="toCall" :data-phone='message.telephone'>呼叫 {{message.telephone}}</view>
				<view class="cancel" @tap="cancel">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	export default {
		components: {uniPopup},
		props:['message','personalUserId','isIndex'],
		data() {
			return {
				userId:""
			};
		},
		methods: {
			back(){
				if(this.isIndex){
					window.location.href = 'http://classic.wljiam.com/personal'
					return
				}
				uni.navigateBack({
					delta: 1
				})
			},	
			toLookHisFans(e) {
				let type=e.currentTarget.dataset.type
				uni.navigateTo({
					url: '/pages/otherHomepage/hisFans?type='+type+"&personalUserId="+this.personalUserId
				})
			},
			toDetail(){
				uni.navigateTo({
					url: '/pages/otherHomepage/designerMessage?userId='+this.message.userId
				})
			},
			toOpenPhone(){
				this.$refs.popup.open()	
			},
			cancel(){
				this.$refs.popup.close()
			},
			toCall(e){
				let phone=e.currentTarget.dataset.phone
				uni.makePhoneCall({
				    phoneNumber: phone 
				})
			}
		}
	}
</script>

<style lang="scss">
.designerHeader{
	height: 578rpx;
	background-color:transparent;
	position: relative;
}
.background{
	position: absolute;
	width:750rpx ;
	bottom: 0;
	left: 0;
	z-index: 0;
}
.header{
	height: 88rpx;
	display: flex;
	align-items: center;
	position: relative;
	width: 750rpx;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 998;
	overflow: hidden;
	background-color:transparent;
	.header_background{
		position: absolute;
		width:750rpx ;
		bottom: -490rpx;
		left: 0;
		z-index: -1;
	}
	view{
		width: 25%;
		display: flex;
		align-items: center;
	}
	.header_left{
		image{
			height:44rpx ;
			width: 44rpx;
			margin-left: 30rpx;
		}
	}
	.header_middle{
		width: 50%;
		justify-content:center;
		text{
			font-size: 36rpx;
			letter-spacing: 1rpx;
			color: #333333;
		}
	}
}
.designerHeader_body{
	height: 366rpx;
	width: 690rpx;
	margin:  0 auto;
	margin-top: 24rpx;
	background:linear-gradient(155deg,rgba(233,210,179,1) 0%,rgba(208,168,126,1) 100%);
	box-shadow:0px 2rpx 8rpx 0px rgba(176,123,77,1);
	border-radius:32rpx;
	position: relative;
	padding:40rpx 0 0 24rpx;
	overflow: hidden;
	.head{
		position: absolute;
		top:26rpx ;
		right:26rpx;
		border: 4rpx solid #FFFFFF;
		height:144rpx ;
		width: 144rpx;
		border-radius: 50%;
		z-index: 3;
	}
	.v{
		position: absolute;
		z-index: 2;
		height: 204rpx;
		width: 291rpx;
		bottom: -10rpx;
		right: -8rpx;
	}
	.detail{
		position: absolute;
		z-index: 3;
		right: 0;
		bottom:70rpx ;
		height: 56rpx;
		width: 167rpx;
		background-color: #C84739;
		border-top-left-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		display: flex;
		align-items: center;
		padding-left:14rpx ;
		opacity: 0.8;
		text{
			font-size: 28rpx;
			letter-spacing: 1rpx;
			color:#FFFFFF;
			line-height: 28rpx;
		}
		image{
			height: 24rpx;
			width: 24rpx;
			margin-left: 5rpx;
		}
	}
	.name{
		display: flex;
		align-items: center;
		text{
			font-size:40rpx ;
			color:#5C493F ;
			line-height:46rpx ;
			letter-spacing: 2rpx;
		}
		image{
			height:39rpx ;
			width: 39rpx;
			margin-left: 18rpx;
		}
	}
	.desc{
		height:38rpx ;
		width: 113rpx;
		border-radius: 4rpx;
		background-color:rgba(239,219,196,1);
		box-shadow:0px 0px 6rpx 0px rgba(176,125,82,0.5);
		display: flex;
		align-items: center;
		position: relative;
		margin-top: 20rpx;
		image{
			height: 24rpx;
			width: 24rpx;
			margin-left: 6rpx;
		}
		text{
			font-size: 22rpx;
			color: #85623B;
			letter-spacing: 1rpx;
			position: absolute;
			right: 6rpx;
		}
	}
	.speciality{
		display: flex;
		align-items: center;
		margin-top: 40rpx;
		position: relative;
		z-index: 3;
		text{
			font-size: 28rpx;
			letter-spacing: 1rpx;
			color: #5C493F;
		}
		view{
			height: 8rpx;
			width: 8rpx;
			border-radius: 50%;
			margin: 0 10rpx; 
			background-color:#5C493F ;
		}
	}
	.phone{
		display: flex;
		align-items: center;
		margin-top: 29rpx;
		image{
			height: 32rpx;
			width: 32rpx;
		}
		text{
			font-size:28rpx ;
			color: #5C493F;
			letter-spacing: 1rpx;
			line-height: 28rpx;
			margin-left: 6rpx;
		}
	}
	.addr{
		margin-top: 23rpx;
		text{
			margin-left: 15rpx;
		}	
	}
}
.guanzhu{
	height:110rpx ;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 2;
	view{
		text-align: center;
		width: 374.5rpx;
		font-size:30rpx ;
		color:#5C493F ;
		letter-spacing: 1rpx;
		line-height: 30rpx;
	}
	.xian{
		width: 1rpx;
		height: 22rpx;
		background-color:#5C493F ;
	}
}
.popup_body{
		position: absolute;
		bottom: 43rpx;
		left:25rpx;
		width: 700rpx;
		background-color: #FFFFFF;
		border-radius: 25rpx;
		height: 225rpx!important;
		view{
			width: 100%!important;
			height: 114rpx;
			border-bottom: 1rpx solid #D8D8D8;
			font-size: 34rpx;
			color: #A66354;
			line-height:107rpx ;
			text-align: center;
		}
		.cancel{
			color: #999999;
		}
	}
	.popup_body>view:last-of-type{
		border: 0;
	}
</style>
